<template>
  <div class="content">
    <div>
      <van-nav-bar
        title="设置"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>

    <div class="nav1">
      <van-cell is-link @click="changpassword" class="updatePwd">修改密码</van-cell>
      <van-cell is-link @click="securitypassword" class="updateTi">设置安全问题</van-cell>
      <van-cell is-link @click="bindPhoneNumber" class="updatePhone">绑定手机号</van-cell>
    </div>
    <div class="introduction">
      <van-button type="default" style="width: 332px;" @click="signout">退出登录</van-button>
    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        show: false,
      };
    },
    methods: {
      onClickLeft() {
        this.$router.push({path: 'MyHome'})
      },
      changpassword() {
        this.$router.push({path: 'changpass'})
      },
      securitypassword() {
        this.$router.push({path: 'Securitypassword'})
      },
      //绑定手机号
      bindPhoneNumber() {
        this.$router.push({path: 'bindPhoneNumber'})
      },
      signout() {
        this.$router.push({path: '/'})
      }
    },
  }
</script>

<style scoped>
  .content {
    height: 100%;
    background-color: #f7f7f7;
  }

  .nav1 {
    margin-top: 20px;
  }

  .introduction {
    height: 40px;
    left: 24px;
    top: 577px;
    color: rgba(80, 80, 80, 1);
    font-size: 15px;
    line-height: 150%;
    text-align: center;
    margin-top: 312px;
  }

  .updatePwd::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background: url('../../assets/bi.svg');
    background-size: contain;
    margin-right: 5px;
  }

  .updateTi::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background: url('../../assets/ti.svg');
    background-size: contain;
    margin-right: 5px;
  }

  .updatePhone::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background: url('../../assets/phone.svg');
    background-size: contain;
    margin-right: 5px;
  }
</style>

